$(function () {
    // 定义请求参数
    var q = {
        pagenum: 1, // 第几页
        pagesize: 2, // 每页多少条数据
        cate_id: '', // 分类 id
        state: '', // 文章状态

    }

    // 获取 form
    var form = layui.form

    var laypage = layui.laypage

    // 1. 渲染文章列表表格
    function renderArtList() {
        // 1.1 调用接口
        $.ajax({
            url: '/my/article/list',
            method: 'GET',
            data: q,
            success: function (res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }

                // 1.3定义过滤器，处理时间格式化
                template.defaults.imports.formatTime = function (value) {
                    return moment(value).format('YYYY-MM-DD HH:mm:ss')
                }

                // 1.2 调用模板函数渲染数据
                var htmlStr = template('art-list-tpl', res)
                $('tbody').html(htmlStr)

                // 1.4 调用渲染分页器的函数
                renderPage(res.total)
            }
        })
    }
    renderArtList()

    // 2.获取文章分类列表，渲染到下拉框
    function getCateList() {
        // 2.1 调用接口
        $.ajax({
            url: '/my/article/cates',
            method: 'GET',
            success: function (res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }

                // 2.2 调用模板函数进行渲染
                var htmlStr = template('cate-list-tpl', res)
                $('[name="cate_id"]').append(htmlStr)
                // 2.3 更新表单后，要重新渲染
                form.render(); //更新全部
            }
        })
    }
    getCateList()

    // 3. 监听表单提交事件，筛选数据
    $('#form-filter').on('submit', function (e) {
        e.preventDefault()

        // 3.1 修改请求参数对象 q 
        q.cate_id = $('[name="cate_id"]').val()
        q.state = $('[name="state"]').val()

        // 3.2 再去发请求，渲染表格数据
        renderArtList()
    })

    // 4. 渲染分页器数据
    function renderPage(total) {
        // 4.1执行一个laypage实例
        laypage.render({
            elem: 'pagination',  //注意，这里的 pagination 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, // 每页显示的条数
            limits: [2, 3, 5, 10], // 每页条数下拉框配置项
            curr: q.pagenum, // 当前显示第几页
            // 分页器的排版
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            //  跳转页面触发 jump 回调函数
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    // 4.2 修改请求参数对象， 重新渲染表格数据
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit

                    // 4.3 调用函数
                    renderArtList()
                }
            },
        })
    }

    // 5. 点击删除按钮，删除文章数据
    $(document).on('click', '.del-btn', function () {
        // 5.1 获取自定义属性值 id
        var id = $(this).data('id')

        // 5.2 弹出询问框
        layer.confirm('是否确认删除？', { icon: 3, title: '提示' }, function (index) {
            // 5.3 调用接口，删除文章
            $.ajax({
                url: '/my/article/delete/' + id,
                method: 'GET',
                success: function (res) {
                    if (res.status != 0) {
                        return layer.msg(res.message)
                    }
                    layer.msg('删除文章成功!')

                    // 5.5 删除最后一条数据，让页码值自动减一
                    if ($('.del-btn').length == 1 && q.pagenum !== 1) {
                        q.pagenum--
                    }
                    // 5.4 重新渲染页面
                    renderArtList()
                }
            })

            layer.close(index);
        });
    })


























})